<template>
  <div class="find-car-from page_pos_style" :style="{ top: `${phoneStatusBarHeight}`}">
    <!-- <van-nav-bar title="按揭" fixed placeholder :border='false'>
      <template #left>
        <van-icon
        name="arrow-left"
        size="18"
        @click="goback"
        />
      </template>
    </van-nav-bar> -->
    <navbar :title="title"></navbar>
    <div class="car-info">
      <van-form @submit="cutOutTime" :show-error="false">

        <van-field
          v-model="carType"
          is-link
          readonly
          name="carType"
          label="车辆信息"
          placeholder="请选择车辆类型"
          @click="jmupToBrand"
          :required="true"
          :class="isCarType?'special':''"
          class="special-padding"
          size="large"
          input-align="right"
        />
        <!-- <van-popup v-model:show="show" round position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirm"
            @cancel="show = false"
            :show-toolbar="true"
            title="车辆信息"
          />
        </van-popup> -->

        <van-field
        label="联系电话"
        placeholder="请输入电话号码"
        :required="true"
        type="tel"
        v-model="mortgageFrom.phone"
        name="phone"
        :rules="[{ validator, message: '请输入正确手机号' }]"
        :class="isActive?'special':''"
        class="special-padding"
        size="large"
        input-align="right"
        ></van-field>

        <van-field
          v-model="mortgageFrom.city"
          name="city"
          is-link
          readonly
          label="购车城市"
          placeholder="请选择购车城市"
          @click="showArea = true"
          :required="true"
          :class="isCity?'special':''"
          class="special-padding"
          size="large"
          input-align="right"
        />
        <van-popup v-model="showArea" round position="bottom">
          <van-area
            :area-list="areaList"
            :columns-num="2"
            @confirm="onConfirmCity"
            @cancel="showArea = false"
            size="large"
            title="选择城市"
          />
        </van-popup>

        <div class="special-font" >
          <span >备注</span>
        </div>


        <van-field
        name="remark"
        placeholder="请输入相关备注信息"
        type="textarea"
        v-model="mortgageFrom.remark"
        size="large"
        class="remark"
        ></van-field>

        <!-- <textarea placeholder="请输入相关备注信息" class="remark"></textarea> -->

        <div class="but">
          <van-button  block type="info" native-type="cutOutTime" color="#FFDD00" :disabled="disabled">提交</van-button>
        </div>
      </van-form>

    </div>

  </div>
</template>

<script>
  import { areaList } from '../../../node_modules/@vant/area-data'
  import { mortgageSave } from './api'
  export default{
    data() {
      return {
        // header栏 => 标题
        title:"按揭",

        loading: false,
        columns: ['宝马','保时捷','玛莎拉蒂'],
        show: false,
        carType:'',
        mortgageFrom: {
          carType: '',
          phone: '',
          city: '',
          remark: ''
        },
        showArea: false,
        areaList,
        value: '',
        showPicker: false,
        isActive: false,
        isCity: false,
        isCarType: false,
        // 获取屏幕状态栏高度
        phoneStatusBarHeight:'',
        changeTime: new Date().getTime(), // 当前时间
        disabled: false
      }
    },
    methods: {
      // 手机号校验函数返回 true 表示校验通过，false 表示不通过
      validator(val) {
        //手机号验证正则
        const tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if(val != '' && tel.test(val)) {
          this.isActive = false
          return true
        } else {
          this.isActive = true
          return false
        }
      },
      goback() {
        this.$router.go(-1)
      },
      onConfirm(value) {
        this.mortgageFrom.carType = value
        this.show = false
      },
	    // 跳转到品牌选择页面
	    jmupToBrand(){
      localStorage.setItem('carBandPage','MortageForm')
	    this.$router.push({
	      name: 'SelectBrand',
        query:{
          myName:'MortageForm'
        }
	    })
	    },
       // 定时器
      cutOutTime(values) {
        this.disabled = true
        this.changeTime = new Date().getTime()
        setTimeout(() => {
          if(new Date().getTime() - this.changeTime >= 1000) {
            this.onSubmit(values)
          }
        }, 1000)
      },
      onSubmit(values) {
        // console.log(values)
        let value = this.mortgageFrom
        if(values.carType === '') {
          this.disabled = false
          this.isCarType = true
          this.$toast({
            message: '请选择车辆信息',
            position: 'top'
          })
        } else if (values.city === '') {
          this.disabled = false
          this.isCity = true
          this.$toast({
            message: '请选择购车城市',
            position: 'top'
          })
        } else {
          this.isCarType = false
          this.isCity = false
          //在这里可以发送请求
          console.log(values)
          let {carType,vtdId,vnid,brand,biName} = this.$route.query
          let params = { 
            buyCarCity:values.city,
            contactWay:values.phone,
            remark:values.remark,
            vtdName: carType,
            vtdId,
            vnid,
            vnName: brand,
            biName
          }
          mortgageSave(params).then(res=>{
            if(res.code === -1) {
              this.disabled = false
              return this.$notify({
                message: '请查看网络',
                type: 'danger'
              })
            } else if (res.code === 0) {
              this.$notify({
                message: '已成功提交按揭申请，我们的工作人员会在1-5个工作日与您取得联系',
                type: 'success'
              })
            // 修改提示栏距离顶部高度
            this.$nextTick(()=>{
              document.querySelector('.van-popup--top').style.top = this.phoneStatusBarHeight
            })
              setTimeout(()=>{
                this.$router.push({
                  name:'MortgageRecode'
                })
              },1000)
            }
          }).catch(err=>{
            console.error(err)
          })
        }
      },
      onChange(value) {
        picker.value.setColumnValues(1, cities[value[0]])
      },
      onConfirmCity(value) {
        let city = value
          .filter((item) => !!item)
          .map((item) => item.name)
          .join('/');
        this.mortgageFrom.city = city
        // console.log(city)
        this.showArea = false
      },
      // 获取路由链接上拼接的token值
      getTokenInUrl() {
        var url = window.location.href;
        if (url.indexOf("token") > 0) {
          let getTokenParams = window.location.href.split("token=")[1];
          getTokenParams=getTokenParams.split("&")[0];
          if (getTokenParams.length >= 32) {
            getTokenParams = getTokenParams.substr(0, 32);
            console.log('%c [ getTokenParams ]', 'font-size:13px; background:pink; color:#bf2c9f;', getTokenParams)
            sessionStorage.setItem("token", getTokenParams);
          }
        }
      }
    },
    created() {
      // 获取屏幕状态栏高度
      this.phoneStatusBarHeight = window.phoneStatusBarHeight
      // 修改页面标题
      document.title = "按揭"
      // 获取路由链接上拼接的token值
      this.getTokenInUrl()
      console.log(this.$route.query)
    },
    mounted() {
      document.querySelector('body').setAttribute('style', 'background-color:#F8F8F8')
	  if(this.$route.query.carType) this.carType = this.$route.query.carType
    }
  }
</script>


<style lang="less">
  .van-cell--large .van-cell__title{
    color: #666666;
    font-family: PingFangSC-Regular, PingFang SC ;
    font-weight: 400;
    font-size: 16px;
  }
  .van-field__control{
    font-size: 16px;
  }
</style>
<style scoped lang="less">
  .special-padding{
    padding: 20px 16px !important;
  }
  .remark{
    border: none;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #B3B3B3;
    padding: 0 16px;
    height: 100px;
    width: 100%;
  }
  .special-font{
    padding: 16px 16px 0 16px;
    background-color: white;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .special{
    border: 1px solid red;
  }
  .car-info{
    .van-cell--required::before{
      left: 23vw !important;
      font-size: 16px;
    }
    .but{
      margin: 20px 12px;
      .van-button{
        color: black !important;
        font-size: 17px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }
    }
  }
</style>
